// Name:            Style layout
// Description:     Sets  values for admin page layout HTML elements and customization.
//
// =============================================================================



/* mower admin body style.
 ========================================================================== */
 body:before {
   content: "";
   display: block;
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   z-index: -1;
   background-color: @body-bg-color;
 }

 .form-control,
 .dropdown-menu {
    font-size: @font-size-base;
 }


 /* mower header.styles for  top navbar.
  ========================================================================== */
  .mu-header-container .navbar .navbar-header {
    width: 235px;
   }
    
 .mu-header-container {
     .header-menu {
         .navbar-nav {
             margin: 0;
             > li > a {
                 color: #fff;
             }
             > li.open > a, > li.open > a:focus, > li.open > a:hover {
                 background-color: @theme-primary-active;
             }
             > li.active > a, > li.active > a:focus, > li.active > a:hover {
                 background-color: @theme-primary-active;
             }
             > li > a:focus, > li > a:hover, > li > a:active {
                 background-color: @theme-primary-active;
                 color: #fff;
             }
             .dropdown-menu>.active>a, .dropdown-menu>.active>a:hover, .dropdown-menu>.active>a:focus {
                 background-color: @theme-primary-active;
             }
         }
     }


     .navbar {
         padding: 0;
         margin: 0;
         border: none;
         height: 45px;
         min-height: 45px;
         z-index: 200;
         .navbar-inner {
             border: 0;
             .border-radius(0);
             margin: 0;
             padding-left: 0;
             padding-right: 0;
             min-height: 45px;
             position: relative;
             background: @theme-primary;
             .navbar-container {
                 padding-left: 10px;
             }
             .navbar-header {
                 .navbar-account {
                     height: 45px;
                     > div {
                         display: inline-block;
                         width: auto;
                         vertical-align: top;
                     }
                     .account-area {
                         position: absolute;
                         top: 0;
                         right: 5px;
                         .opacity(1);
                         list-style: none;
                         margin-bottom: 0;
                         display: inline-block;
                         > li {
                             float: left;
                             position: relative;
                             height: 45px;
                             > a {
                                 position: relative;
                                 min-width: 50px;
                                 height: 45px;
                                 display: inline-block;
                                 &:hover {
                                     text-decoration: none;
                                 }
                                 .icon {
                                     display: block;
                                     margin: 0 auto;
                                     color: @white;
                                     font-size: 16px;
                                     line-height: 48px;
                                     text-align: center;
                                     .transition(line-height .3s ease);
                                 }
                                 .badge {
                                     position: absolute;
                                     top: 6px;
                                     left: 4px;
                                     padding: 2px;
                                     cursor: pointer;
                                     background-color: transparent !important;
                                     border: 1px solid @white;
                                     width: 18px;
                                     height: 18px;
                                     box-shadow: 1px 1px 0 @theme-primary;
                                     .transition(top .3s ease);
                                 }
                             }
                             .dropdown-menu {
                                 padding: 0;
                                 min-width: 240px;
                                 .animation-name(dropdownSlideInDown);
                                 .animation-duration(.3s);
                                 .border-radius(0) !important;
                                 li {
                                     background-color: @white;
                                     border: 0;
                                     padding: 0 8px;
                                     &:hover {
                                         background-color: @whitesmoke;
                                     }
                                     a {
                                         margin: 0;
                                         font-size: 12px;
                                         line-height: 16px;
                                         padding: 10px 2px;
                                         .progress {
                                             margin-bottom: 0;
                                             margin-top: 4px;
                                         }
                                         &:hover {
                                             background-color: @whitesmoke;
                                         }
                                     }
                                     &.dropdown-header, &.dropdown-footer {
                                         .text-shadow(none);
                                         font-size: 13px;
                                         font-weight: normal;
                                         text-transform: none;
                                         color: @darkcarbon;
                                     }
                                     &.dropdown-header {
                                         padding: 0 10px;
                                         line-height: 34px;
                                         margin-bottom: 10px;
                                         border-bottom: 1px solid #cecece;
                                         a {
                                             line-height: 34px;
                                         }
                                         &[class*="bordered-"] {
                                             border-bottom-width: 3px;
                                             border-style: solid;
                                         }
                                         i {
                                             margin-right: 5px;
                                         }
                                     }
                                     &.dropdown-footer {
                                         padding: 8px 5px 8px 10px;
                                         &[class*="bordered-"] {
                                             border-top-width: 3px;
                                             border-style: solid;
                                         }
                                         a {
                                             display: inline-block;
                                             color: @darkgray;
                                             padding: 0;
                                         }
                                         .btn {
                                             margin-top: -3px;
                                         }
                                     }
                                 }
                                 &.dropdown-notifications {
                                     min-width: 300px;
                                     padding-top: 10px;
                                     li {
                                         border-bottom: 1px solid @seashell;
                                         .notification-icon {
                                             float: left;
                                             i {
                                                 width: 32px;
                                                 height: 32px;
                                                 text-align: center;
                                                 line-height: 32px;
                                                 margin-right: 10px;
                                                 font-size: 15px;
                                                 border-radius: 50%;
                                             }
                                         }
                                         .notification-body {
                                             float: left;
                                             .title {
                                                 display: block;
                                                 font-size: 13px;
                                             }
                                             .description {
                                                 display: block;
                                                 font-size: 10px;
                                                 color: @darkgray;
                                             }
                                         }
                                         .notification-extra {
                                             float: right;
                                             text-align: right;
                                             i {
                                                 font-size: 14px;
                                             }
                                             .description {
                                                 display: block;
                                                 font-size: 10px;
                                                 color: @darkgray;
                                             }
                                         }
                                         &.dropdown-footer {
                                             background-color: @sky;
                                             border-bottom: 0;
                                             color: @white;
                                             a {
                                                 color: @white;
                                             }
                                             .weather-icon {
                                                 margin-top: -7px;
                                                 margin-left: 5px;
                                             }
                                         }
                                     }
                                 }
                                 &.dropdown-messages {
                                     width: 300px;
                                     padding-top: 10px;
                                     li {
                                         border-bottom: 1px solid @seashell;
                                         .message-avatar {
                                             max-width: 42px;
                                             margin-right: 6px;
                                             margin-top: 5px;
                                             vertical-align: top;
                                         }
                                         .message {
                                             display: inline-block;
                                             position: relative;
                                             width: 225px;
                                             span {
                                                 display: block;
                                             }
                                         }
                                         .message-sender {
                                             font-size: 13px;
                                         }
                                         .message-time {
                                             position: absolute;
                                             top: 0;
                                             right: 0;
                                             font-size: 11px;
                                             font-weight: 400;
                                             color: @theme-primary;
                                         }
                                         .message-subject {
                                             margin-top: 5px;
                                         }
                                         .message-body {
                                             color: @darkgray;
                                             max-height: 35px;
                                             width: 100%;
                                             -ms-text-overflow: ellipsis;
                                             -o-text-overflow: ellipsis;
                                             text-overflow: ellipsis;
                                             white-space: nowrap;
                                             overflow: hidden;
                                         }
                                     }
                                 }
                                 &.dropdown-login-area {
                                     > li {
                                         border-bottom: 1px solid @whitesmoke;
                                         &, a {
                                             &:hover {
                                                 background-color: @white;
                                             }
                                         }
                                         &.username {
                                             display: none;
                                             text-align: center;
                                             &, a {
                                                 color: @lightgray;
                                                 font-size: 14px;
                                                 font-weight: 300;
                                             }
                                         }
                                         &.email {
                                             text-align: center;
                                             font-size: 12px;
                                             &, a {
                                                 color: @lightgray;
                                             }
                                         }
                                         .avatar-area {
                                             position: relative;
                                             text-align: center;
                                             margin: 10px auto;
                                             width: 128px;
                                             .avatar {
                                                 width: 128px;
                                                 height: 128px;
                                             }
                                             .caption {
                                                 background-color: @theme-primary;
                                                 .opacity(.7);
                                                 bottom: 0;
                                                 left: 0;
                                                 color: #fff;
                                                 font-size: 10px;
                                                 line-height: 9px;
                                                 position: absolute;
                                                 padding: 7px 0;
                                                 text-align: center;
                                                 width: 128px;
                                                 cursor: pointer;
                                             }
                                         }
                                         &.edit {
                                             min-height: 35px;
                                             a {
                                                 color: @darkgray;
                                                 display: inline-block;
                                                 clear: none;
                                                 font-size: 13px;
                                                 &:hover {
                                                     color: @sky;
                                                 }
                                             }
                                         }
                                         &.theme-area {
                                             display: table;
                                             width: 100%;
                                             padding-bottom: 5px;
                                             .colorpicker {
                                                 padding: 10px 4px;
                                                 width: 100%;
                                                 > li {
                                                     display: block;
                                                     float: left;
                                                     width: 23px;
                                                     height: 23px;
                                                     margin: 2px;
                                                     padding: 0;
                                                     > .colorpick-btn {
                                                         display: block;
                                                         width: 23px;
                                                         height: 23px;
                                                         margin: 0;
                                                         padding: 0;
                                                         .border-radius(0);
                                                         position: relative;
                                                         .transition(all ease .1s);
                                                         &:hover {
                                                             text-decoration: none;
                                                             .opacity(.8);
                                                             .transform(scale(1.08));
                                                         }
                                                         &.selected:after {
                                                             content: "\f00c";
                                                             display: inline-block;
                                                             font-family: FontAwesome;
                                                             font-size: 11px;
                                                             color: @white;
                                                             position: absolute;
                                                             left: 0;
                                                             right: 0;
                                                             text-align: center;
                                                             line-height: 20px;
                                                         }
                                                     }
                                                 }
                                             }
                                             .btn-colorpicker {
                                                 display: inline-block;
                                                 width: 20px;
                                                 height: 20px;
                                                 background-color: #DDD;
                                                 vertical-align: middle;
                                                 border-radius: 0;
                                             }
                                         }
                                         &.dropdown-footer {
                                             padding: 10px;
                                             border-top: 3px solid @theme-primary;
                                             border-bottom: 0;
                                             text-align: right;
                                             a {
                                                 color: #717171;
                                                 font-size: 13px;
                                                 font-weight: 300;
                                             }
                                         }
                                     }
                                 }
                             }
                             .dropdown-arrow {
                                 &:before {
                                     content: '';
                                     display: inline-block;
                                     right: 0;
                                     position: absolute;
                                     width: 50px;
                                     background-color: @white;
                                     border: 0;
                                     top: -46px;
                                     height: 3px;
                                     .box-shadow(0 2px 40px rgba(0, 0, 0, 0.4));
                                 }
                             }
                             &.open {
                                 > a {
                                     background-color: @theme-primary;
                                     .box-shadow(0 2px 40px rgba(0, 0, 0, 0.4));
                                 }
                                 .dropdown-menu {
                                     margin-top: 0;
                                     right: 0;
                                     border: 0 !important;
                                 }
                             }
                         }
                         .login-area {
                             padding: 8px 20px 10px 20px;
                             height: 45px;
                             opacity: 1;
                             position: relative;
                             cursor: pointer;
                             .avatar {
                                 margin-right: 14px;
                                 display: block;
                                 float: left;
                                 width: 29px;
                                 height: 29px;
                                 img {
                                     width: 29px;
                                     height: 29px;
                                 }
                             }

                             section, .profile {
                                 width: auto;
                                 display: block;
                                 overflow: hidden;
                                 line-height: 25px;
                                 float: left;
                                 h2 {
                                     font-size: 14px !important;
                                     font-weight: 400;
                                     white-space: nowrap;
                                     margin: 0;
                                     span {
                                         display: block;
                                         margin-right: 5px;
                                         min-width: 100px;
                                         color: #fff;
                                         overflow: hidden;
                                         -ms-text-overflow: ellipsis;
                                         -o-text-overflow: ellipsis;
                                         text-overflow: ellipsis;
                                         text-decoration: none;
                                         text-align: right;
                                         line-height: 25px;
                                     }

                                 }
                             }
                             + .dropdown-menu {
                                 width: 100%;
                                 min-width: 100px;
                             }
                             + .dropdown-arrow {
                                 &:before {
                                     width: 100%;
                                 }
                             }
                         }
                     }
                     .account-area {
                         .transform-style(preserve-3d);
                         .backface-visibility(hidden);
                         .transition(0.9s);
                     }
                 }
             }
         }
         .navbar-brand {
             color: @white;
             font-size: 24px;
             .text-shadow(none);
             padding: 2px 0 2px 0;
             font-weight: 200;
             line-height: 40px;
             height: 45px;
             small {
                 img {
                     height: 40px;
                     width: 177px;
                 }
             }
         }
         .sidebar-collapse {
             text-align: center;
             padding: 0;
             position: absolute;
             left: 189px;
             top: 0px;
             z-index: 2;
             width: 35px;
             height: 45px;
             &:hover {
                 .box-shadow(0 0 20px @black2);
             }
             .collapse-icon {
                 display: inline-block;
                 cursor: pointer;
                 font-size: 18px;
                 color: @white;
                 padding: 11px 5px;
                 line-height: 22px;
                 position: relative;
                 .transition(background-color .218s ease);
                 .transition(box-shadow .218s ease);
                 .transition(color .318s ease);
             }
             &.active {
                 &:hover {
                     box-shadow: none;
                 }
                 .collapse-icon {
                     font-size: 14px;
                     .box-shadow(0 0 20px @black2);
                     padding: 11px;
                 }
             }
         }
         &.navbar-fixed-top {
             z-index: 1003;
             + .mu-main-container {
                 margin-top: 45px;
             }
         }
     }
     @media only screen and (max-width: @screen-xs-max) {
         .navbar-container {
             padding-left: 2px;
         }
     }
     @media only screen and (max-width: 760px) {
         .navbar {
             .navbar-inner {
                 .navbar-header {
                     .navbar-account {
                         &.setting-open {
                             .setting {
                                 top: 45px;
                             }
                             .setting-container {
                                 top: 45px;
                             }
                         }
                         .account-area {
                             > li .dropdown-menu.dropdown-login-area > li.username {
                                 display: block;
                             }
                             .login-area {
                                 padding: 8px;
                                 section {
                                     display: none;
                                 }
                                 .avatar {
                                     margin-right: 0;
                                     margin-left: 1px;
                                 }
                                 + .dropdown-menu {
                                     min-width: 200px;
                                     &:before {
                                         width: 50px;
                                     }
                                 }
                             }
                         }
                     }
                 }
                 .header-menu {
                   right: 70px;
                 }
             }
         }
     }
     @media only screen and (max-width: 759px) {
         .navbar {
             .navbar-inner {
                 .navbar-header {
                     .navbar-account {
                         &.setting-open {
                             .setting-container {
                                 width: 270px;
                                 top: 0;
                                 padding: 0 5px;
                                 text-align: left;
                                 label {
                                     margin-bottom: 0;
                                 }
                             }
                             .setting {
                                 right: 270px;
                                 top: 0;
                             }
                         }
                     }
                 }
             }
         }
     }
     @media only screen and (max-width: 530px) {
         .navbar {
             height: 90px;
             .sidebar-collapse {
                 left: auto;
                 right: 0;
                 width: 50px;
                 .collpse-icon {
                     padding: 11px 15px;
                 }
             }
             .navbar-brand {
                 padding-left: 10px;
             }
             .navbar-inner {
                 .navbar-header {
                     float: none !important;
                     display: block;
                     .navbar-account {
                         float: right;
                         .account-area {
                             padding-left: 0;
                             top: 45px;
                             > li {
                                 .dropdown-menu {
                                     &.dropdown-notifications {
                                         left: -135px;
                                         right: auto;
                                         &.dropdown-arrow {
                                             &:before {
                                                 left: 135px;
                                             }
                                         }
                                     }
                                     &.dropdown-messages {
                                         left: -135px;
                                         right: auto;
                                         &.dropdown-arrow {
                                             &:before {
                                                 left: 135px;
                                             }
                                         }
                                     }
                                 }
                             }
                         }
                         .setting {
                             top: 45px !important;
                         }
                         .setting-container {
                             top: 45px !important;
                         }
                         &.setting-open {
                             .setting-container {
                                 left: 50px;
                             }
                             .setting {
                                 left: 0;
                             }
                         }
                     }
                 }
                 .navbar-container {
                     padding-left: 0;
                 }
             }
         }
         .navbar-fixed-top + .main-container {
             margin-top: 90px !important;
         }
         .breadcrumbs-fixed {
             top: 90px !important;
             + .page-header {
                 margin-top: 40px !important;
             }
         }
         .page-header-fixed {
             top: 130px !important;
             + .page-body {
                 margin-top: 80px !important;
             }
         }
         .page-sidebar.sidebar-fixed {
             top: 90px !important;
         }
     }
     @media only screen and (max-width: 450px) {
         .navbar {
             .navbar-inner {
                 .navbar-header {
                     .navbar-account {
                         &.setting-open {
                             .setting-container {
                                 width: 270px;
                                 padding: 0 5px;
                                 text-align: left;
                                 left: 50px;
                                 label {
                                     margin-bottom: 0;
                                 }
                             }
                             .setting {
                                 left: 0;
                             }
                         }
                     }
                 }
             }
         }
     }
     @media only screen and (max-width: 400px) {
         .navbar {
             .navbar-inner {
                 .navbar-header {
                     .navbar-account {
                         .account-area {
                             > li {
                                 .dropdown-menu {
                                     &.dropdown-notifications {
                                         left: -55px;
                                         right: auto;
                                         &.dropdown-arrow {
                                             &:before {
                                                 left: 55px;
                                             }
                                         }
                                     }
                                     &.dropdown-messages {
                                         left: -105px;
                                         right: auto;
                                         &.dropdown-arrow {
                                             &:before {
                                                 left: 105px;
                                             }
                                         }
                                     }
                                     &.dropdown-tasks {
                                         left: -100px;
                                         right: auto;
                                         &.dropdown-arrow {
                                             &:before {
                                                 left: 100px;
                                             }
                                         }
                                     }
                                 }
                             }
                         }
                     }
                 }
             }
         }
     }
     @media only screen and (max-width: 320px) {
         .navbar {
             .navbar-inner {
                 .navbar-header {
                     .navbar-account {
                         .account-area {
                             > li {
                                 .dropdown-arrow {
                                     &:before {
                                         width: 45px !important;
                                     }
                                 }
                                 > a {
                                     min-width: 45px;
                                 }
                             }
                         }
                     }
                 }
             }
         }
     }
     
     @media only screen and (min-width: @screen-md-min) {
         .header-menu {
             float: left !important;
         }
     }
     @media only screen and (max-width: @screen-sm-max) {
         .header-menu {
             position: absolute;
             right: 240px;
         }
     }
     @media only screen and (max-width: @screen-xs-max) {
         .header-menu .navbar-nav .open .dropdown-menu {
             position: absolute;
             margin-top: 0;
             background-color: #fff;
             > li > a {
                 padding: 3px 20px;
             }
         }
     }
 }

 /* mower main container. styles for main container.
  ========================================================================== */
 .mu-main-container {
   padding: 0px;
   position: relative;
 }

 .mu-content {
     display: block;
     margin-left: 224px;
     margin-right: 0;
     margin-top: 0;
     min-height: 100%;
     padding: 0;
 }
 @media only screen and (max-width: 880px) {
     .mu-content {
         margin-left: 0;
     }
 }


/* mower breadcrumb. styles for breadcrumb.
========================================================================== */
.mu-content-header {
 position: relative;
 margin: 0;
 padding: 0;
 .background-image(linear-gradient(to right, @white, @seashell));
 z-index: 0;
 min-height: 40px;
 border-bottom: 1px solid @platinum;
 height: 40px;
 .mu-breadcrumb-wrapper {
     position: relative;
     background: @seashell;
     min-height: 40px;
     line-height: 39px;
     padding: 0;
     display: block;
     .box-shadow(0 2px 4px 0 rgba(0,0,0,.15));
 }
 .header-buttons {
     display: inline-block;
     position: absolute;
     right: 0;
     top: 0;
     a {
         position: relative;
         vertical-align: middle;
         display: inline-block;
         z-index: 1029;
         height: 40px;
         width: 36px;
         margin-right: 5px;
         padding: 8px 10px;
         color: #dfdfdf;
         .transition(all 0.218s ease);
         float: right;
         &:before {
             display: block;
             content: "";
             position: absolute;
             left: 0;
             bottom: -3px;
             right: 0;
             height: 4px;
             max-height: 4px;
             overflow: hidden;
             background-color: @theme-primary;
         }
         &:hover {
             .box-shadow(0 0 20px rgba(0, 0, 0, .2));
             color: @theme-primary;
         }
         &.active {
             color: @theme-primary;
         }
         i {
             font-size: 17px;
             font-style: normal;
             font-weight: normal;
             line-height: 27px;
         }
         &.favorite {
             &:before {
                 background-color: @theme-secondary;
             }
             &:hover, &.active {
                 color: @theme-secondary;
             }
         }
         &.refresh {
             &:before {
                 background-color: @yellow;
             }
             &:hover, &.active {
                 color: @yellow;
             }
         }
         &.sidebar-toggler {
             &:before {
                 background-color: @theme-primary;
             }
             &:hover, &.active {
                 color: @theme-primary;
             }
         }
     }
 }
}

 /* mower siderbar styles.
  ========================================================================== */
 .mu-sidebar {
     position: absolute;
     top: 0;
     bottom: 0;
     width: 224px;
     display: block;
     &.sidebar-fixed {
         position: fixed;
         top: 45px;
         float: none !important;
         z-index: 1000;
         &:before {
             height: 5000px;
             top: 45px;
             bottom: auto;
         }
     }
     &.closed {
         display: none !important;
         &:before {
             display: none;
         }
     }
     &:before {
         content: "";
         position: fixed;
         display: block;
         width: 219px;
         bottom: 0;
         top: 0;
         left: 5px;
         background-color: @white;
         .box-shadow( 0 0 10px 0 @black2);
         z-index: 1;
     }
     .sidebar-header-wrapper {
         margin-left: 5px;
         height: 40px;
         margin-bottom: 0;
         position: relative;
         .searchinput {
             height: 41px;
             z-index: 2;
             background-color: @white;
             display: block;
             position: absolute;
             top: 0;
             left: 0;
             border: 1px solid @white;
             padding-left: 40px;
             width: 100%;
             &:focus {
                 .box-shadow(none);
                 border-color: @white;
                 ~ .searchhelper {
                     display: block;
                     z-index: 124;
                 }
             }
             &::-webkit-input-placeholder {
                 color: @lightgray;
                 font-weight: 300;
                 font-family: @font-family-base;
             }
             &::-moz-placeholder {
                 /* Firefox 19+ */
                 
                 color: @lightgray;
                 font-weight: 300;
                 font-family: @font-family-base;
             }
             &:-moz-placeholder {
                 /* Firefox 19+ */
                 
                 color: @lightgray;
                 font-weight: 300;
                 font-family: @font-family-base;
             }
             &:-ms-input-placeholder {
                 color: @lightgray;
                 font-weight: 300;
                 font-family: @font-family-base;
             }
         }
         .searchicon {
             cursor: pointer;
             display: inline-block;
             height: 12px;
             left: 20px;
             position: absolute;
             top: 14px;
             width: 12px;
             color: @theme-primary;
             z-index: 124;
         }
         .searchhelper {
             .box-shadow( 0 10px 40px rgba(0, 0, 0, .4));
             background-color: #fff;
             color: #999;
             display: none;
             opacity: 1;
             padding: 10px;
             position: absolute;
             right: 0;
             left: 0;
             top: 40px;
             z-index: 4;
         }
     }
     .sidebar-menu {
         margin: 0;
         padding: 0;
         list-style: none;
         margin-left: 5px;
         a {
             display: block;
             height: 35px;
             line-height: 35px;
             margin: 0;
             padding: 0 16px 0 7px;
             .text-shadow(none) !important;
             font-size: 13px;
             text-decoration: none;
             color: @sonic-silver;
             z-index: 123;
             &:hover {
                 color: @darkcarbon;
                 &:before {
                     display: block;
                 }
             }
             .menu-icon {
                 display: inline-block;
                 vertical-align: middle;
                 min-width: 30px;
                 text-align: center;
                 font-size: 14px;
                 font-weight: normal;
                 font-style: normal;
                 margin-top: -3px;
             }
             .menu-expand {
                 display: inline-block;
                 position: absolute;
                 font-size: 13px;
                 line-height: 10px;
                 height: 10px;
                 width: 10px;
                 right: 12px;
                 top: 15px;
                 margin: 0;
                 text-align: center;
                 padding: 0;
                 .text-shadow(none);
                 color: @storm-cloud;
                 .transition(all 300ms ease-in-out);
                 font-family: @fontawesome-font;
                 font-style: normal;
                 font-weight: normal;
                 &:before {
                     content: "\f105"
                     /*rtl:"\f104"*/
                     
                     ;
                 }
             }
         }
         li {
             display: block;
             padding: 0;
             margin: 0;
             border: 0;
             position: relative;
             &:before {
                 display: none;
                 content: "";
                 position: absolute;
                 top: 0;
                 bottom: 0;
                 left: -4px;
                 width: 4px;
                 max-width: 4px;
                 overflow: hidden;
                 background-color: @theme-primary;
             }
             &.open {
                 background-color: @white;
                 > a {
                     color: @darkcarbon;
                     .menu-expand {
                         .transform(rotate(90deg));
                     }
                 }
                 > .submenu {
                     display: block !important;
                 }
             }
             &.active {
                 &:not(.open) {
                     &:before {
                         display: block;
                     }
                 }
                 > a {
                     display: block;
                     content: "";
                     color: @darkcarbon;
                     background-color: @whitesmoke;
                 }
             }
             &:not(.open) {
                 &:hover {
                     &:before {
                         display: block;
                         background-color: @theme-secondary;
                     }
                 }
             }
         }
         > li {
             > a {
                 border-top: 1px solid @seashell;
                 &:hover {
                     border-color: @seashell;
                     background-color: @snow;
                 }
             }
             &:last-child {
                 > a {
                     border-bottom: 1px solid @seashell;
                 }
             }
             > .submenu {
                 background-color: @snow;
                 .box-shadow(inset 0 4px 4px -2px rgba(0, 0, 0, 0.15), inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15));
                 &:before {
                     content: "";
                     display: block;
                     position: absolute;
                     z-index: 1;
                     left: 23px;
                     top: 0;
                     bottom: 19px;
                     border-left: 1px solid #e2e2e2;
                 }
                 > li {
                     > a:before {
                         content: "";
                         display: inline-block;
                         position: absolute;
                         width: 5px;
                         height: 5px;
                         left: 21px;
                         top: 17px;
                         background-color: @white;
                         border: 1px solid #e2e2e2;
                         z-index: 2;
                     }
                     &.active {
                         > a:before {
                             background-color: #e2e2e2;
                         }
                         &:first-child {
                             a {
                                 .box-shadow(inset 0 4px 4px -2px rgba(0, 0, 0, 0.15));
                             }
                         }
                         &:last-child {
                             a {
                                 .box-shadow(inset 0 -4px 4px -2px rgba(0, 0, 0, 0.15));
                             }
                         }
                     }
                 }
             }
             &.open {
                 > a {
                     background-color: @white;
                 }
             }
         }
         .submenu {
             display: none;
             list-style: none;
             margin: 0;
             padding: 0;
             position: relative;
             background-color: @snow;
             border-top: 0;
             z-index: 123;
             li {
                 margin-left: 0;
                 position: relative;
                 &.open {
                     &:before {
                         display: none;
                     }
                 }
                 &.active {
                     > a {
                         color: @darkcarbon;
                         background-color: @whitesmoke;
                     }
                     > .submenu {
                         display: block;
                     }
                 }
             }
             > li {
                 > a {
                     padding-left: 40px;
                 }
                 &.open {
                     > a {
                         background-color: @snow;
                     }
                 }
                 .submenu {
                     border-top: 1px solid @ivory;
                     border-bottom: 1px solid @ivory;
                     > li {
                         > a {
                             padding-left: 50px;
                         }
                         .submenu {
                             > li {
                                 > a {
                                     padding-left: 70px;
                                 }
                             }
                         }
                     }
                 }
             }
         }
     }
     &.menu-compact {
         width: 42px;
         &:before {
             width: 42px;
         }
         .sidebar-header-wrapper {
             width: 42px;
             &:hover {
                 width: 238px;
                 .searchinput {
                     .box-shadow( 0 10px 40px rgba(0, 0, 0, .4));
                 }
             }
             .searchinput {
                 &:focus {
                     width: 238px;
                     .box-shadow( 0 10px 40px rgba(0, 0, 0, .4));
                     ~ .searchhelper {
                         width: 238px;
                     }
                 }
             }
             .searchicon {
                 left: 15px;
             }
         }
         .sidebar-menu {
             width: 42px;
             > li {
                 &.open {
                     > .menu-text {
                         display: none !important;
                     }
                     > .submenu {
                         display: none !important;
                     }
                 }
                 &:hover {
                     > a {
                         color: @darkcarbon;
                         > .menu-text {
                             display: block;
                         }
                     }
                     > .submenu {
                         display: block !important;
                     }
                 }
                 > a {
                     position: relative;
                     z-index: 123;
                     .menu-text {
                         display: none;
                         position: absolute;
                         left: 42px;
                         top: 0;
                         width: 195px;
                         height: 38px;
                         line-height: 38px;
                         background-color: @white;
                         z-index: 121;
                         padding-left: 25px;
                         .box-shadow(5px 5px 5px -5px @black3, 5px 5px 5px -5px @black3, 5px -5px 5px -5px @black3);
                     }
                     .menu-expand {
                         display: none;
                     }
                     &.menu-dropdown {
                         .box-shadow(none);
                         > .menu-text {
                             border: 0;
                             top: 0;
                             left: 42px;
                             width: 195px;
                             border-bottom: 1px solid @seashell;
                             .box-shadow(none);
                         }
                     }
                     &:hover {
                         background-color: @white;
                     }
                 }
                 > .submenu {
                     background: @snow;
                     position: absolute;
                     z-index: 120;
                     left: 42px;
                     top: 0;
                     width: 195px;
                     .box-shadow(none);
                     padding-top: 38px;
                     display: none;
                     border-left: 1px solid @seashell;
                     .box-shadow(5px 5px 5px -5px @black3, 5px 5px 5px -5px @black3, 5px -5px 5px -5px @black3);
                     li {
                         > a {
                             margin-left: 0;
                             padding-left: 24px;
                         }
                         &.open {
                             > .submenu {
                                 display: block;
                                 left: 0;
                                 position: relative;
                                 .box-shadow(none);
                             }
                         }
                         .submenu {
                             display: none;
                             list-style: none;
                             margin: 0;
                             padding: 0;
                             position: relative;
                         }
                         &:hover {
                             background-color: @white;
                             &:before {
                                 display: block;
                                 left: 0;
                             }
                         }
                         &.active {
                             &:not(.open) {
                                 &:before {
                                     left: 0;
                                 }
                             }
                         }
                     }
                     &:before {
                         display: none;
                     }
                     > li {
                         > a {
                             .box-shadow(none) !important;
                             &:before {
                                 display: none;
                             }
                         }
                     }
                 }
             }
         }
     }
 }

 .mu-sidebar-closed .mu-content {
     margin-left: 0 !important;
 }

 .mu-sidebar-compact .mu-content {
     margin-left: 43px;
 }

 @media only screen and (max-width: 880px) {
     .mu-sidebar:before {
         display: none;
     }
     .mu-sidebar {
         display: none;
         float: none;
     }
 }
 @media (max-width: 880px) {
     .mu-sidebar {
         &.hide {
             display: block !important;
             &:before {
                 display: block !important;
             }
         }
     }

     .mu-sidebar-closed {
         .mu-content {
             margin-left: 224px !important;
         }
     }

     .mu-sidebar-compact {
         .mu-content {
             margin-left: 0;
         }

         &.mu-sidebar-closed {
             .mu-content {
                 margin-left: 46px !important;
             }
         }
     }
 }
 @media (max-width: 500px) {
     .mu-sidebar {
         &.hide {
             + .page-content {
                 .page-header {
                     .header-title {
                         display: none;
                     }
                     .header-buttons {
                         .refresh, .fullscreen {
                             display: none;
                         }
                     }
                 }
             }
         }
         &.menu-compact {
             &.hide {
                 + .page-content {
                     .page-header {
                         .header-buttons {
                             .refresh, .fullscreen {
                                 display: inline-block;
                             }
                         }
                     }
                 }
             }
         }
     }
 }
